@charset "utf-8";

@import '../../theme.scss';

.x-time-picker {
  display: flex;
  height: px(390);
  overflow: hidden;
  padding: px(20) px(60);
  flex-wrap: nowrap;
  position: relative;

  > div ul {
    padding: px(140) 0;
    overflow: hidden;
    touch-action: none;

    li {
      height: px(70);
      line-height: px(70);
      text-align: center;
      font-size: px(36);
      color: var(--x-text-color);
      display: block;
    }
  }

  &__tips {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    color: var(--x-danger-color);
    font-size: px(22);
    pointer-events: none;
  }

  &__mask-t,
  &__mask-b {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: px(160);
    pointer-events: none;
    z-index: 9;
  }

  &__mask-t {
    background: linear-gradient(var(--x-time-picker-mask-color-from), var(--x-time-picker-mask-color-to));
  }

  &__mask-b {
    top: auto;
    bottom: 0;
    background: linear-gradient(var(--x-time-picker-mask-color-to), var(--x-time-picker-mask-color-from));
  }

  &__day-list {
    flex-grow: 1;
    overflow: hidden;
  }

  &__hh-list {
    flex-grow: 1;
    overflow: hidden;
  }

  &__mm-list {
    flex-grow: 1;
    overflow: hidden;
  }
}
